<script setup lang="ts">
import $api from '@/api/index'
import Model from '@/components/common/Model.vue'
import { ref,watch } from 'vue'
import {useScroll} from '@vueuse/core'
import useRem from '@/hooks/useRem'
interface Props{
  visible?:boolean,
  value?:Array<any>
}
const props=withDefaults(defineProps<Props>(),{
  visible:false,
  value: () =>{
    return []
  }
})
const emit=defineEmits<{
  (e: 'update:visible', val: boolean): void,
  (e: 'change', val: any): void
}>()
const model=ref(null),provinces=ref([]),citys=ref([]),areas=ref([]),t1=ref(null),t2=ref(null),t3=ref(null)
const {data:tree}=$api.city.getTree()
watch(tree,(_tree:Array<any>) =>{
  provinces.value=_tree
  //init()
})
function init(){
  const {rem2px}=useRem()
  const itemHeight=rem2px(7),clientHeight=rem2px(32.25),scrollY=4*itemHeight.value-clientHeight.value/2+itemHeight.value/2
  let _y1=scrollY,_y2=scrollY,_y3=scrollY
  const _idx1=provinces.value.findIndex(val => val.code==props.value[0])
  idx1.value=_idx1>0?_idx1:0
  changeProvince(provinces.value[idx1.value])
  let offsetY1=_y1+idx1.value*itemHeight.value
  let offsetY2=_y2+idx2.value*itemHeight.value
  let offsetY3=_y2+idx3.value*itemHeight.value
  const {y:y1}=useScroll(t1,{
    onStop(e){
      _y1??=y1.value
      const _idx1=(y1.value-_y1)/itemHeight.value
      idx1.value=_idx1>0?Math.round(_idx1):0
      console.log(_y1,idx1.value,y1.value,itemHeight.value)
      changeProvince(provinces.value[idx1.value])
    }
  })
  const {y:y2}=useScroll(t2,{
    onStop(e){
      _y2??=y2.value
      const _idx2=(y2.value-_y2)/itemHeight.value
      idx2.value=_idx2>0?Math.round(_idx2):0
      changeCity(citys.value[idx2.value])
    }
  })
  const {y:y3}=useScroll(t3,{
    onStop(e){
      _y3??=y3.value
      const _idx3=(y3.value-_y3)/itemHeight.value
      idx3.value=_idx3>0?Math.round(_idx3):0
    }
  })
  watch(t1,(_t1) =>{
    _t1?.scroll(0, offsetY1)
  })
  watch(t2,(_t2) =>{
    _t2?.scroll(0, offsetY2)
  })
  watch(t3,(_t3) =>{
    _t3?.scroll(0, offsetY3)
  })
}
//选择省份
function changeProvince(item){
  citys.value=item.children
  const _idx2=citys.value.findIndex(val => val.code==props.value[1])
  idx2.value=_idx2>0?_idx2:0
  changeCity(citys.value[idx2.value])
}
//选择市
function changeCity(item){
  areas.value=item.children
  const _idx3=citys.value.findIndex(val => val.code==props.value[2])
  idx3.value=_idx3>0?_idx3:0
}
//取消
function cancel(){
  model.value.hideModel()
  emit('update:visible',false)
}
//确认
function confirm(){
  const province={
    name:provinces.value[idx1.value].name,
    value:provinces.value[idx1.value].code
  }
  const city={
    name:citys.value[idx2.value].name,
    value:citys.value[idx2.value].code
  }
  const area={
    name:areas.value[idx3.value].name,
    value:areas.value[idx3.value].code
  }
  emit('change',[province,city,area])
  emit('update:visible',false)
}
watch(props,(_props) =>{
  if(_props.visible){
    model.value.showModel()
  }else{
    model.value.hideModel()
  }
  if(_props.value&&provinces.value.length>0){
    init()
  }
})
const idx1=ref(0),idx2=ref(0),idx3=ref(0)

</script>

<template>
  <Model ref="model" mode="bottom" @hide="emit('update:visible',false)">
    <div
      w:w="screen"
      w:h="150"
      w:flex="~ col nowrap"
      w:p="4"
      w:bg="white"
    >
      <div
        w:flex="~ nowrap"
        w:justify="between"
        w:text="3xl"
        w:m="2"
      >
        <div @click="cancel"
          w:text="gray-400"
        >取消</div>
        <div @click="confirm"
          w:text="blue-600"
        >确认</div>
      </div>
      <div
        w:flex="~ nowrap 1"
        w:text="4xl gray-400"
        w:overflow="y-scroll"
        w:pos="relative"
        w:h="129"
      >
        <div class="snap snap-y snap-mandatory scrollbar-hide" ref="t1"
          w:w="1/3"
          w:h="full"
          w:text="center"
          w:overflow="y-scroll"
        >
          <div v-for="(item,idx) in 4" :key="'start-'+idx"
            w:h="28"
          >&nbsp;</div>
          <div v-for="(item,idx) in provinces" :key="item._id" @click="changeProvince(item)" class="snap-center" :class="[idx1==idx?'font-bold text-dark-800':'']"
            w:h="28"
            w:flex="~ nowrap"
            w:justify="center"
            w:align="items-center"
          >
            {{item.name}}
          </div>
          <div v-for="(item,idx) in 4" :key="'end-'+idx"
            w:h="28"
          >&nbsp;</div>
        </div>
        <div class="snap snap-y snap-mandatory scrollbar-hide" ref="t2"
          w:w="1/3"
          w:h="full"
          w:text="center"
          w:overflow="y-scroll"
        >
          <div v-for="(item,idx) in 4" :key="'start-'+idx"
            w:h="28"
          >&nbsp;</div>
          <div v-for="(item,idx) in citys" :key="item._id" @click="changeCity(item)" class="snap-center" :class="[idx2==idx?'font-bold text-dark-800':'']"
            w:h="28"
            w:flex="~ nowrap"
            w:justify="center"
            w:align="items-center"
          >{{item.name}}</div>
          <div v-for="(item,idx) in 4" :key="'end-'+idx"
            w:h="28"
          >&nbsp;</div>
        </div>
        <div class="snap snap-y snap-mandatory scrollbar-hide" ref="t3"
          w:w="1/3"
          w:h="full"
          w:text="center"
          w:overflow="y-scroll"
        >
          <div v-for="(item,idx) in 4" :key="'start-'+idx"
            w:h="28"
          >&nbsp;</div>
          <div v-for="(item,idx) in areas" :key="item._id" class="snap-center" :class="[idx3==idx?'font-bold text-dark-800':'']"
            w:h="28"
            w:flex="~ nowrap"
            w:justify="center"
            w:align="items-center"
          >{{item.name}}</div>
          <div v-for="(item,idx) in 4" :key="'end-'+idx"
            w:h="28"
          >&nbsp;</div>
        </div>
        <div
          w:pos="absolute top-0 left-0"
          w:w="full"
          w:h="full"
          w:flex="~ nowrap"
          w:align="items-center"
          w:pointer="none"
        >
          <div
            w:w="full"
            w:border="y-2 solid gray-400"
            w:h="28"
          >&nbsp;</div>
        </div>
      </div>
    </div>
  </Model>
</template>

<style scoped lang="scss">

</style>